Horizontal layout of DHTML menu

1X

This requires a great lot of CSS and Javascript magic, and I can't do it for now. Patches are welcome, though.

In case this will help someone else along the way, I was able to implement a horizontal DHTML menu using CSS overrides (in theme css, not DHTML menu) targeting menus in the #navbar region in my theme. I've tested in IE 7/8 and FF3.

Basically, float your list items as usual. Then assign a width to collapsed items and make overflow visible. Your 'overflow' is going to be the nested list. Either allow these to drop down vertically, or assign them a defined width (or min-width and max-width). Depending on the the specifics of your theme, you need to specify the width and left/right margins for each level. This may not be the best solution, but it is an easy one. No conflicts with other DHTML-enabled menus, and no extra modules.

My css looks something like:

#navbar ul
{margin: 0 0 0 0; padding: 0; text-align: left}

#navbar li
{float: left; padding: 3px 7px 0 10px}

#navbar ul.menu li.collapsed /* level 1 links */
{ width: 140px; overflow: visible}

#navbar ul.menu li.expanded ul /* level 2 links */
{ width: 600px}

#navbar ul.menu li.expanded ul li.expanded ul /* level 3 links */
{width: 300px}

//UPDATE//
See it in action at http://ohiochristian.edu/trailblazers (click Men's or Women's Sports). The only real caveats I've found are that (1) top-level items must be similar in width. If you combine very short and very long menu items, you'd need to set the width for each item individually. And (2) applying background colors to the expanded menus requires some extra consideration. Otherwise, quick, easy, and effective.

I can add classes to dhtml_menu.css and most menu HTML elements just fine, so this could in fact work. I'll unpostpone it, but it still has to wait for a bundle of other new changes.